@import "../common/vars.scss";
@import "../mixins/mixins.scss";
@include create(popper){
    .aiui-popper-arrow,
    .aiui-popper-arrow::after {
        position: absolute;
        display: block;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
    }

    .aiui-popper-arrow {
        border-width: $popper-arrow-size;
        filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03))
    }

    .aiui-popper-arrow::after {
        content: " ";
        border-width: $popper-arrow-size;
    }

    &[x-placement^="top"] {
        margin-bottom: #{$popper-arrow-size + 6};
    }

    &[x-placement^="top"] .aiui-popper-arrow {
        bottom: -$popper-arrow-size;
        left: 50%;
        margin-right: #{$tooltip-arrow-size / 2};
        border-top-color: $popper-border-color;
        border-bottom-width: 0;

        &::after {
        bottom: 1px;
        margin-left: -$popper-arrow-size;
        border-top-color: $popper-fill;
        border-bottom-width: 0;
        }
    }

    &[x-placement^="bottom"] {
        margin-top: #{$popper-arrow-size + 6};
    }

    &[x-placement^="bottom"] .aiui-popper-arrow {
        top: -$popper-arrow-size;
        left: 50%;
        margin-right: #{$tooltip-arrow-size / 2};
        border-top-width: 0;
        border-bottom-color: $popper-border-color;

        &::after {
        top: 1px;
        margin-left: -$popper-arrow-size;
        border-top-width: 0;
        border-bottom-color: $popper-fill;
        }
    }

    &[x-placement^="right"] {
        margin-left: #{$popper-arrow-size + 6};
    }

    &[x-placement^="right"] .aiui-popper-arrow {
        top: 50%;
        left: -$popper-arrow-size;
        margin-bottom: #{$tooltip-arrow-size / 2};
        border-right-color: $popper-border-color;
        border-left-width: 0;

        &::after {
        bottom: -$popper-arrow-size;
        left: 1px;
        border-right-color: $popper-fill;
        border-left-width: 0;
        }
    }

    &[x-placement^="left"] {
        margin-right: #{$popper-arrow-size + 6};
    }

    &[x-placement^="left"] .aiui-popper-arrow {
        top: 50%;
        right: -$popper-arrow-size;
        margin-bottom: #{$tooltip-arrow-size / 2};
        border-right-width: 0;
        border-left-color: $popper-border-color;

        &::after {
        right: 1px;
        bottom: -$popper-arrow-size;
        margin-left: -$popper-arrow-size;
        border-right-width: 0;
        border-left-color: $popper-fill;
        }
    }
}